<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>搜索页</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/index.css">
    <script src="js/jquery.min.js"></script>
    <link rel="stylesheet" href="css/owl.carousel.min.css">
    <script src="js/bootstrap.min.js"></script>
    <script src="js/owl.carousel.min.js"></script>
</head>
<body>
<!--搜索区-->
<div id="search">
    <div class="container-fluid">
        <div class="row">
            <div class="search-bg">
                <div class="col-xs-2 col-sm-2">
                    <img src="images/ss_03.png" alt="搜索图标">
                </div>
                <div class="col-xs-8 col-sm-8">
                    <input type="search" class="form-control" placeholder="请输入要搜索内容">
                </div>
                <div class="col-xs-2 col-sm-2">
                    <img src="images/tp_03.png" alt="照相机图标" >
                </div>
            </div>
        </div>
    </div>
</div>
<!--热搜课程-->
<div id="hot">
    <div class="container-fluid">
        <div class="row">
            <div class="all-width center-block">
                <div class="col-xs-12 col-sm-12">

                    <h2>
                        <span class="vert"></span>
                        热搜课程
                    </h2>
                </div>
            </div>
        </div>
        <div class=" row all-widths">
        <div class="owl-carousel owl-theme">
                <div class="item clearfix">
                    <div class=" col-xs-4 col-sm-4 hot-item">
                        <div class="hot-pic">
                            <img src="images/pic2_13.png">
                        </div>
                        <div class="hot-txt">
                            <h3>计算机原理</h3>
                        </div>
                    </div>
                    <div class=" col-xs-4 col-sm-4  hot-item">
                        <div class="hot-pic">
                            <img src="images/pic3_15.png">
                        </div>
                        <div class="hot-txt">
                            <h3>会记电算化</h3>
                        </div>
                    </div>
                    <div class=" col-xs-4 col-sm-4  hot-item">
                        <div class="hot-pic">
                            <img src="images/pic4_17.png">
                        </div>
                        <div class="hot-txt">
                            <h3>市场营销</h3>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div class=" col-xs-4 col-sm-4 hot-item">
                        <div class="hot-pic">
                            <img src="images/pic2_13.png">
                        </div>
                        <div class="hot-txt">
                            <h3>计算机原理</h3>
                        </div>
                    </div>
                    <div class=" col-xs-4 col-sm-4  hot-item">
                        <div class="hot-pic">
                            <img src="images/pic3_15.png">
                        </div>
                        <div class="hot-txt">
                            <h3>会记电算化</h3>
                        </div>
                    </div>
                    <div class=" col-xs-4 col-sm-4  hot-item">
                        <div class="hot-pic">
                            <img src="images/pic4_17.png">
                        </div>
                        <div class="hot-txt">
                            <h3>市场营销</h3>
                        </div>
                    </div>
                </div>
                <div class="item clearfix">
                    <div class=" col-xs-4 col-sm-4 hot-item">
                        <div class="hot-pic">
                            <img src="images/pic2_13.png">
                        </div>
                        <div class="hot-txt">
                            <h3>计算机原理</h3>
                        </div>
                    </div>
                    <div class=" col-xs-4 col-sm-4  hot-item">
                        <div class="hot-pic">
                            <img src="images/pic3_15.png">
                        </div>
                        <div class="hot-txt">
                            <h3>会记电算化</h3>
                        </div>
                    </div>
                    <div class=" col-xs-4 col-sm-4  hot-item">
                        <div class="hot-pic">
                            <img src="images/pic4_17.png">
                        </div>
                        <div class="hot-txt">
                            <h3>市场营销</h3>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
<!--推荐课程-->
<div id="recommond">
    <div class="container-fluid">
        <div class="rows">
            <div class="all-width center-block">
                <div class="col-xs-12 col-sm-12">

                    <h2>
                        <span class="vert"></span>
                        推荐课程
                    </h2>
                </div>
            </div>
        </div>
        <div class="row">
        <div class="col-xs-5 col-sm-5">
            <img src="images/pic5_27.png" alt="图片">
        </div>
        <div class=" item col-xs-7 col-sm-7">
            <h2>商务法语指导课程</h2>
            <p class="item-text">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, saepe.  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, quaerat!  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                Blanasdsadsadsadsadasdasdasdadadasditiis ipsa laboriosam modi omnis, perspiciatis quidem quis rerum sunt veniam voluptates?
                Lorem ipsum dolor sit amet, Blanditiis ipsa laboriosam modi omnis, perspiciatis quidem quis rerum
            </p>
            <div class="col-xs-6 col-sm-6 forms">
                来源：<span>中国教育网</span>
            </div>
            <div class="col-xs-6 col-sm-6">
                <button class="btn float-right ">
                    查看课程
                </button>
            </div>
        </div>
    </div>
        <div class="row">
        <div class="col-xs-5 col-sm-5">
            <img src="images/pic4_24.png" alt="图片">
        </div>
        <div class=" item col-xs-7 col-sm-7">
            <h2>商务法语指导课程</h2>
            <p class="item-text">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, saepe.  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, quaerat!  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                Blanasdsadsadsadsadasdasdasdadadasditiis ipsa laboriosam modi omnis, perspiciatis quidem quis rerum sunt veniam voluptates?
                Lorem ipsum dolor sit amet, Blanditiis ipsa laboriosam modi omnis, perspiciatis quidem quis rerum
            </p>
            <div class="col-xs-6 col-sm-6 forms">
                来源：<span>中国教育网</span>
            </div>
            <div class="col-xs-6 col-sm-6">
                <button class="btn float-right ">
                    查看课程
                </button>
            </div>
        </div>
    </div>
        <div class="row">
            <div class="col-xs-5 col-sm-5">
                <img src="images/pic5_27.png" alt="图片">
            </div>
            <div class=" item col-xs-7 col-sm-7">
                <h2>商务法语指导课程</h2>
                <p class="item-text">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, saepe.  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, quaerat!  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    Blanasdsadsadsadsadasdasdasdadadasditiis ipsa laboriosam modi omnis, perspiciatis quidem quis rerum sunt veniam voluptates?
                    Lorem ipsum dolor sit amet, Blanditiis ipsa laboriosam modi omnis, perspiciatis quidem quis rerum
                </p>
                <div class="col-xs-6 col-sm-6 forms">
                    来源：<span>中国教育网</span>
                </div>
                <div class="col-xs-6 col-sm-6">
                    <button class="btn float-right ">
                        查看课程
                    </button>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-5 col-sm-5">
                <img src="images/pic4_24.png" alt="图片">
            </div>
            <div class=" item col-xs-7 col-sm-7">
                <h2>商务法语指导课程</h2>
                <p class="item-text">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, saepe.  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, quaerat!  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    Blanasdsadsadsadsadasdasdasdadadasditiis ipsa laboriosam modi omnis, perspiciatis quidem quis rerum sunt veniam voluptates?
                    Lorem ipsum dolor sit amet, Blanditiis ipsa laboriosam modi omnis, perspiciatis quidem quis rerum
                </p>
                <div class="col-xs-6 col-sm-6 forms">
                    来源：<span>中国教育网</span>
                </div>
                <div class="col-xs-6 col-sm-6">
                    <button class="btn float-right ">
                        查看课程
                    </button>
                </div>
            </div>
        </div>
            </div>
        </div>
<script>
    // 开启轮播插件
    $(function () {
        $(".owl-carousel").owlCarousel(
            {
                items:1,
                loop:true,
                autoplay:true,
                smartSpeed:2000,
                autoplayTimeout:3000
            }
        );})
</script>
</body>
</html>